<template>
  <el-dialog
    title="公共检验项目维护"
    :visible.sync="visible"
    :before-close="close"
    :close-on-click-modal="false"
	append-to-body
    width="80%">

    <div class="font-highlight">注：修改会立即同步到已经发起的绩效考核的项目中去</div>
    <el-table
    	:data="dataList"
    	border
      fit
      highlight-current-row
      style="width: 100%">
      <el-table-column
        prop="specialInspectionItemId"
        header-align="center"
        align="center"
        label="编号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="inspectionItemName"
        header-align="center"
        align="center"
        label="名称">
        <template slot-scope="{row}">
          <el-input v-if="row.edit" v-model="row.inspectionItemName" size="small" />
          <span v-else>{{ row.inspectionItemName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="inspectionGroupName"
        header-align="center"
        align="center"
        label="小组">
        <template slot-scope="{row}">
          <el-select v-if="row.edit" v-model="row.groupObj" value-key="inspectionGroupId" filterable placeholder="所属小组" size="small">
            <el-option
              v-for="group in groupList"
              :key="group.inspectionGroupId"
              :label="group.inspectionGroupName"
              :value="group">
            </el-option>
          </el-select>
          <span v-else>{{ row.groupObj.inspectionGroupName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="manHourOne"
        header-align="center"
        align="center"
        label="工时1(h)">
        <template slot-scope="{row}">
          <el-input v-if="row.edit" v-model="row.manHourOne" size="small" />
          <span v-else>{{ row.manHourOne }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="manHourTwo"
        header-align="center"
        align="center"
        label="工时2(h)">
        <template slot-scope="{row}">
          <el-input v-if="row.edit" v-model="row.manHourTwo" size="small" />
          <span v-else>{{ row.manHourTwo }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        header-align="center"
        align="center"
        label="备注">
        <template slot-scope="{row}">
          <el-input v-if="row.edit" v-model="row.remark" size="small" />
          <span v-else>{{ row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="操作">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-button
              class="pan-btn danger-btn"
              size="small"
              type="danger"
              @click="cancelEdit(row)">
              取消
            </el-button>
            <el-button
              type="success"
              class="pan-btn success-btn"
              size="small"
              @click="confirmEdit(row)">
              确定
            </el-button>
          </template>
          <el-button
            v-else
            type="warning"
            class="pan-btn warning-btn"
            size="small"
            @click="showEdit(row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" class="pan-btn primary-btn" size="small" @click="close">关 闭</el-button>
  	</span>
  </el-dialog>
</template>

<script>
  import { CODE_OK } from '@/common/js/config'
  import { getSpecialItems,saveOrUpdateSpecialItem } from '@/api/item'
  import { getGroupList } from '@/api/inspection'
  import { isPositiveNumber } from '@/common/js/validate'
  import { isBlank } from '@/common/js/utils'
  export default {
    data() {
      return {
        visible: false,
        dataList: [],
        groupList: []
      }
    },
    created() {
      this.getInfo()
      this.visible = true
    },
    methods: {
      confirmEdit(row) {
        if (isBlank(row.inspectionItemName)) {
          this.$message.error('项目名称不能为空')
          return
        }
        if (!isPositiveNumber(row.manHourOne) || !isPositiveNumber(row.manHourTwo)) {
          this.$message.error('工时需为正数值')
          return
        }
        row.inspectionGroupId = row.groupObj.inspectionGroupId
        row.inspectionGroupName = row.groupObj.inspectionGroupName
        saveOrUpdateSpecialItem(row).then(res => {
          if (res.code === CODE_OK) {
            this.$message.success('修改成功')
            row.originalInspectionItemName = res.item.inspectionItemName
            row.originalGroupObj = {
              inspectionGroupId: res.item.inspectionGroupId,
              inspectionGroupName: res.item.inspectionGroupName
            }
            row.originalManHourOne = res.item.manHourOne
            row.originalManHourTwo = res.item.manHourTwo
            row.originalRemark = res.item.remark
            row.edit = false
          }else{
            this.$message.error(res.msg)
          }
          this.submitingAddSpecialItem = false
        })
      },
      cancelEdit(row) {
        row.inspectionItemName = row.originalInspectionItemName
        row.groupObj = row.originalGroupObj
        row.manHourOne = row.originalManHourOne
        row.manHourTwo = row.originalManHourTwo
        row.remark = row.originalRemark
        row.edit = false
      },
      showEdit(row) {
        row.edit = true
        if (isBlank(row.manHourOne)) {
          row.manHourOne = 0
        }
        if (isBlank(row.manHourTwo)) {
          row.manHourTwo = 0
        }
      },
      close() {
        this.visible = false
        this.$emit('close')
        this.$emit('refreshData')
      },
      rowInit(row) {
        this.$set(row,'groupObj',{
          inspectionGroupId: row.inspectionGroupId,
          inspectionGroupName: row.inspectionGroupName
        })
        this.$set(row,'edit', false)
        this.$set(row,'originalInspectionItemName',row.inspectionItemName)
        this.$set(row,'originalGroupObj',row.groupObj)
        this.$set(row,'originalManHourOne',row.manHourOne)
        this.$set(row,'originalManHourTwo',row.manHourTwo)
        this.$set(row,'originalRemark',row.remark)
        return row
      },
      getInfo() {
        getSpecialItems().then(res => {
          if (res.code === CODE_OK) {
            this.dataList = res.list.map(v => {
              v = this.rowInit(v)
              return v
            })
          }else{
            this.$message.error(res.msg)
          }
        })
        const params = {
          page: 1,
          limit: 9999999
        }
        getGroupList(params).then(res => {
        	if (res.code === CODE_OK) {
        		this.groupList = res.page.list.filter(g => {
              return g.inspectionGroupId != 1 && g.inspectionGroupId != 2
            })
        	}else{
            this.$message.error(res.msg)
          }
        })
      }
    }
  }
</script>

<style scoped>
</style>
